import { lazy, Suspense } from 'react';
import { Navigate, RouteObject, RouterProvider, createBrowserRouter } from 'react-router-dom';
import DashboardLayout from '@/layouts/dashboard/index';
import Manage from '@/pages/manage';
import ProductDetail from '@/pages/manage/product-detail';
import AddProduct from '@/pages/manage/addproduct';
import Statistics from '@/pages/statistics';
import AuthRoute from '@/layouts/dashboard/components/AuthRoute';
import { AppRouteObject } from '#/router';


const LazyLanding = lazy(() => import('@/pages/landing/index'));
const LazyLogin = lazy(() => import('@/pages/login/Login'));
const LazyRegister = lazy(() => import('@/pages/login/Register'));
const LazyReset = lazy(() => import('@/pages/login/Reset'));

const CommonRoute: AppRouteObject[] = [
  {
    path: '/',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLanding />
      </Suspense>
    ),
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLogin />
      </Suspense>
    ),
  },
  {
    path: '/register',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyRegister />
      </Suspense>
    ),
  },
  {
    path: '/reset',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyReset />
      </Suspense>
    ),
  },
  {
    path: "/404",
    Component: lazy(() => import('@/pages/sys404'))
  }
]
const PAGE_NOT_FOUND_ROUTE: AppRouteObject = {
  path: '*',
  element: <Navigate to="/404" replace />,
};

export default function Router() {
  // 后续还需准备异步路由
  const asyncRoutes: AppRouteObject = {
    path: '/workbench',
    element: (
      <AuthRoute>
        <DashboardLayout />
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="manage" replace />
      },
      {
        path: 'manage',
        element: <Manage />
      },
      {
        path: 'addproduct',
        element: <AddProduct />
      }
      ,
      {
        path: "productdetail/:id",
        element: <ProductDetail></ProductDetail>
      },
      {
        path: 'statistics',
        element: <Statistics />
      }
    ],
  };


  const routes = [...CommonRoute, asyncRoutes, PAGE_NOT_FOUND_ROUTE];

  const router = createBrowserRouter(routes as unknown as RouteObject[]);
  return <RouterProvider router={router} />;
}
